<template>
  <el-container>
    <!--头部-->
    <el-header style="background: #f7f7f7">
      <el-row class="toolbox">
        <el-col :span="10">
          <!--<div class="grid-content ep-bg-purple" />-->
          <div class="toolbars">
            <ul class="dragQuUl">
            <!--拖拽样式-->
              <li id="radioQuModel">
                <el-card class="box-card1" shadow="hover">
                  <div class="label">
                    <div
                      class="drag"
                      draggable="true"
                      id="radiodragger"
                      @dragstart="handleDragStart($event, 1)"
                      @drag="handleDrag($event)"
                      @dragend="handleDragEnd($event)"
                    >
                      <div>单选题</div>
                      <div v-show="!radioDragType">
                        <div ref="aaa">
                          <el-card class="box-card2" shadow="never">
                            <template #header>
                              <div class="card-header">
                                <el-row>
                                  <el-col :span="12"
                                    ><el-input
                                      v-model="input"
                                      placeholder="请输入题目"
                                      clearable
                                  /></el-col>
                                  <el-col :span="12"
                                    ><el-button
                                      type="primary"
                                      style="margin-right: 10px"
                                      >保存</el-button
                                    ></el-col
                                  >
                                </el-row>
                              </div>
                            </template>
                            <div>
                              <el-input
                                v-model="input"
                                placeholder="填写选项内容"
                                clearable
                              />
                            </div>
                            <div />
                            <div>
                              <el-input
                                v-model="input"
                                placeholder="填写选项内容"
                                clearable
                              />
                            </div>
                            <div />
                            <div>
                              <el-input
                                v-model="input"
                                placeholder="填写选项内容"
                                clearable
                              />
                            </div>
                            <div />
                            <div>
                              <el-input
                                v-model="input"
                                placeholder="填写选项内容"
                                clearable
                              />
                            </div>
                          </el-card>
                        </div>
                      </div>
                    </div>
                    <!--<div class="maskBox"></div>-->
                  </div>
                </el-card>
              </li>
              <li id="muliradioQuModel">
                <el-card class="box-card" shadow="hover">
                  <div class="label">
                    <div
                      class="muliraiodrag"
                      draggable="true"
                      id="radiodragger"
                      @dragstart="handleDragStart($event, 2)"
                      @drag="handleDrag($event)"
                      @dragend="handleDragEnd($event)"
                    >
                      <div>多项选择题</div>
                      <div v-show="!mutiradioDragType">
                        <div>
                          <span> 请输入题目？</span><input type="text" />
                        </div>
                        <div><span> 选项1？</span><input type="text" /></div>
                        <div><span> 选项2？</span><input type="text" /></div>
                      </div>
                    </div>
                    <!--<div class="maskBox"></div>-->
                  </div>
                </el-card>
              </li>
              <li id="checkboxQuModel">
                <el-card class="box-card" shadow="hover"
                  ><div class="label">
                    <div
                      class="drag"
                      draggable="true"
                      id="checkboxdragger"
                      @dragstart="handleDragStart($event, 3)"
                      @drag="handleDrag($event)"
                      @dragend="handleDragEnd($event)"
                    >
                      <div>填空题</div>
                      <div v-show="!checkboxDragType">
                        <div><span> 输入题目？</span><input type="text" /></div>
                        <div><span> 答案</span><input type="text" /></div>
                      </div>
                    </div>
                    <!--<div class="maskBox"></div>-->
                  </div>
                </el-card>
              </li>
            </ul>
          </div>
        </el-col>

        <el-col :span="13">
          <!--<div class="grid-content ep-bg-purple-light" />-->
          <div class="buttonbox">
            <el-button type="primary" size="large" @click="showDialog"
              >提交</el-button
            >
            <el-button type="primary" size="large">预览</el-button>
            <el-button type="primary" size="large">草稿</el-button>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <!--pdf-->
    <el-main style="overflow-x: hidden; overflow-y: hidden">
      <div class="page" style="display: flex; justify-content: center">
        <div class="pdfModelBox">
          <div class="pdfCon" ref="pdfCon">
            <span v-show="isshow" style="font-family: 微软雅黑"
              >请拖拽设计问卷</span
            >
            <div v-for="(item, index) in modelList" :key="index">
              <div v-if="item.modelType == 1">
                <el-card class="box-card2" shadow="hover">
                  <!--题目设置 题签标定-->
                  <template #header>
                    <div class="card-header">
                      <h2>题目{{ index + 1 }}</h2>
                      <el-row>
                        <el-col :span="12">
                          <div class="choice">
                            <el-tag
                              class="ml-2"
                              type="success"
                              style="
                                text-align: center;
                                margin-top: 5px;
                                width: 50px;
                              "
                              >单选题</el-tag
                            >
                            <span style="width: 20px"></span>
                            <el-input
                              v-model="item.subject"
                              style="height=40px"
                              placeholder="请输入题目"
                              clearable
                            />
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <el-button
                            type="danger"
                            @click="deletequ(index)"
                            size="medium"
                            style="margin-right=10px"
                            >删除</el-button
                          >
                          <el-button
                            @click="addanswer(index)"
                            size="medium"
                            type="primary"
                            style="margin-right=10px"
                            >添加选项</el-button
                          >
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                  <!--选项设置 功能键实施-->
                  <div v-for="(items, indexs) in item.option" :key="indexs">
                    <el-row>
                      <el-col :span="12">
                        <div class="choice">
                          <span
                            style="
                              text-align: center;
                              margin-top: 5px;
                              width: 20px;
                            "
                            >{{ letter[indexs] }}</span
                          >
                          <el-input
                            v-model="items.value"
                            placeholder="填写选项内容"
                            clearable
                          />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-popconfirm
                          title="Are you sure to delete this?"
                          @confirm="handleconfirm(index, indexs)"
                        >
                          <template #reference>
                            <el-button size="small" circle>
                              <el-icon style="vertical-align: middle">
                                <Delete />
                              </el-icon>
                            </el-button>
                          </template>
                        </el-popconfirm>
                      </el-col>
                    </el-row>
                  </div>
                  <div style="height: 5px"></div>
                </el-card>
              </div>
              <div v-if="item.modelType == 2">
                <el-card class="box-card2" shadow="hover">
                  <!--题目设置 题签标定-->
                  <template #header>
                    <div class="card-header">
                    <h2>题目{{ index + 1 }}</h2>
                      <el-row>
                        <el-col :span="12">
                          <div class="choice">
                            <el-tag
                              class="ml-2"
                              style="
                                text-align: center;
                                margin-top: 5px;
                                width: 50px;
                              "
                              >多选题</el-tag
                            >
                            <span style="width: 20px"></span>
                            <el-input
                              v-model="item.subject"
                              style="height=40px"
                              placeholder="请输入题目"
                              clearable
                            />
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <el-button
                            type="danger"
                            @click="deletequ(index)"
                            size="medium"
                            style="margin-right=10px"
                            >删除</el-button
                          >
                          <el-button
                            @click="addanswer(index)"
                            size="medium"
                            type="primary"
                            style="margin-right=10px"
                            >添加答案</el-button
                          >
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                  <!--选项设置 功能键实施-->
                  <div v-for="(items, indexs) in item.option" :key="indexs">
                    <el-row>
                      <el-col :span="12">
                        <div class="choice">
                          <span
                            style="
                              text-align: center;
                              margin-top: 5px;
                              width: 20px;
                            "
                            >{{ letter[indexs] }}</span
                          >
                          <el-input
                            v-model="items.value"
                            placeholder="填写选项内容"
                            clearable
                          />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-popconfirm
                          title="Are you sure to delete this?"
                          @confirm="handleconfirm(index, indexs)"
                        >
                          <template #reference>
                            <el-button size="small" circle>
                              <el-icon style="vertical-align: middle">
                                <Delete />
                              </el-icon>
                            </el-button>
                          </template>
                        </el-popconfirm>
                      </el-col>
                    </el-row>
                  </div>
                  <div style="height: 5px"></div>
                </el-card>
              </div>
              <div v-if="item.modelType == 3">
                <el-card class="box-card2" shadow="hover">
                  <!--题目设置 题签标定-->
                  <template #header>
                    <div class="card-header">
                    <h2>题目{{ index + 1 }}</h2>
                      <el-row>
                        <el-col :span="12">
                          <div class="choice">
                            <el-tag
                              class="ml-2"
                              type="warning"
                              style="
                                text-align: center;
                                margin-top: 5px;
                                width: 50px;
                              "
                              >填空题</el-tag
                            >
                            <span style="width: 20px"></span>
                            <el-input
                              v-model="item.subject"
                              style="height=40px"
                              placeholder="请输入题目"
                              clearable
                            />
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <el-button
                            type="danger"
                            @click="deletequ(index)"
                            size="medium"
                            style="margin-right=10px"
                            >删除</el-button
                          >
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                  <!--选项设置 功能键实施-->
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="textarea2"
                  >
                  </el-input>
                </el-card>
              </div>
            </div>
            <!--vue转成html-->
            <div ref="aaa" v-show="false">
              <el-card class="box-card2" shadow="hover">
                <!--题目设置 题签标定-->
                <template #header>
                  <div class="card-header">
                    <el-row>
                      <el-col :span="12">
                        <div class="choice">
                          <el-tag
                            class="ml-2"
                            type="success"
                            style="
                              text-align: center;
                              margin-top: 5px;
                              width: 50px;
                            "
                            >单选题</el-tag
                          >
                          <span style="width: 20px"></span>
                          <el-input
                            v-model="input"
                            style="height=40px"
                            placeholder="请输入题目"
                            clearable
                          />
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-button
                          type="danger"
                          @click="deletequ"
                          size="medium"
                          style="margin-right=10px"
                          >删除</el-button
                        >
                      </el-col>
                    </el-row>
                  </div>
                </template>
                <!--选项设置 功能键实施-->
                <div>
                  <el-row>
                    <el-col :span="12">
                      <div class="choice">
                        <span
                          style="
                            text-align: center;
                            margin-top: 5px;
                            width: 20px;
                          "
                          >A</span
                        >
                        <el-input
                          v-model="input"
                          placeholder="填写选项内容"
                          clearable
                        />
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <el-popconfirm title="Are you sure to delete this?">
                        <template #reference>
                          <el-button size="small" circle>
                            <el-icon style="vertical-align: middle">
                              <Delete />
                            </el-icon>
                          </el-button>
                          <i class="el-icon-delete"></i>
                        </template>
                      </el-popconfirm>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <ArrowUp />
                        </el-icon>
                      </el-button>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <ArrowDown /> </el-icon
                      ></el-button>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <Plus /> </el-icon
                      ></el-button>
                    </el-col>
                  </el-row>
                </div>
                <div style="height: 5px"></div>
                <div>
                  <el-row>
                    <el-col :span="12">
                      <div class="choice">
                        <span
                          style="
                            text-align: center;
                            margin-top: 5px;
                            width: 20px;
                          "
                          >B</span
                        >
                        <el-input
                          v-model="input"
                          placeholder="填写选项内容"
                          clearable
                        />
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <el-popconfirm title="Are you sure to delete this?">
                        <template #reference>
                          <el-button size="small" circle>
                            <el-icon style="vertical-align: middle">
                              <Delete />
                            </el-icon>
                          </el-button>
                        </template>
                      </el-popconfirm>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <ArrowUp />
                        </el-icon>
                      </el-button>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <ArrowDown /> </el-icon
                      ></el-button>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <Plus /> </el-icon
                      ></el-button>
                    </el-col>
                  </el-row>
                </div>
                <div style="height: 5px"></div>
                <div>
                  <el-row>
                    <el-col :span="12">
                      <div class="choice">
                        <span
                          style="
                            text-align: center;
                            margin-top: 5px;
                            width: 20px;
                          "
                          >C</span
                        >
                        <el-input
                          v-model="input"
                          placeholder="填写选项内容"
                          clearable
                        />
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <el-popconfirm title="Are you sure to delete this?">
                        <template #reference>
                          <el-button size="small" circle>
                            <el-icon style="vertical-align: middle">
                              <Delete />
                            </el-icon>
                          </el-button>
                        </template>
                      </el-popconfirm>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <ArrowUp />
                        </el-icon>
                      </el-button>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <ArrowDown /> </el-icon
                      ></el-button>
                      <el-button size="small" circle
                        ><el-icon style="vertical-align: middle">
                          <Plus /> </el-icon
                      ></el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </el-main>

    <!--提交弹出框-->
    <el-dialog
      v-model="dialogVisible"
      title="发布问卷设置"
      width="50%"
      :before-close="handleClose"
    >
      <!--<span>This is a message</span>-->
      <el-form :model="form" label-width="120px">
        <el-form-item label="问卷标题">
          <el-input v-model="form.surveyName" />
        </el-form-item>
        <el-form-item label="截止时间">
          <el-date-picker
            v-model="form.createDate"
            type="date"
          />
        </el-form-item>
        <!--<el-form-item label="问卷发布人群">-->
          <!--<el-input v-model="form.people" />-->
        <!--</el-form-item>-->
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
    <!--单个题目保存框-->

  </el-container>
</template>

<script>
import {
  Delete,
  Plus,
  Minus,
  ArrowUp,
  ArrowDown,
} from "@element-plus/icons-vue";

export default {
  name: "DesignQuestionnaire",
  data() {
    return {
      tenantId: 2,
      radioDragType: true,
      mutiradioDragType: true,
      checkboxDragType: true,
      isshow: true,
      showItem: false,
      modelId: "",
      dialogVisible: false,
      form: {
        surveyName: "",
        createDate: "",
        userId: 0,
        answerNum: 0,
        state: 0
      },
      addModelNum: 0,
      modelList: [],
      letter: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  methods: {
    deletequ(index) {
      this.modelList.splice(index, 1);
    },

    save(index) {
      console.log(this.modelList);
      console.log(this.form)
      this.form.userId = this.tenantId
      this.form.answerNum = 0
      this.form.state = 0
       this.$axios.post("/survey-base/save",this.form
       ).then(res=>res.data).then(res=>{
         if(res.code==200){
           // 问题所属 id
           let belongId = res.data;
           console.log("id ==" + res.data)
           // 保存问题及其答案
           this.$axios.post("/question-bank-problem/saveQuestion",{
             belongId : belongId,
             modelList: this.modelList
           }
           ).then(res=>res.data).then(res=>{
             if(res.code==200){
               console.log(保存成功)
             }
           })
           this.$alert("保存问卷成功");
           this.$router.push("/survey/SurveyList")
        }
       })
    },

    addanswer(index) {
      this.modelList[index].option.push({ value: "" });
    },
    delanswer(index, indexs) {
      this.modelList[index].option.splice(indexs, 1);
    },

    handleconfirm(index, indexs) {
      console.log(index, indexs);
      this.modelList[index].option.splice(indexs, 1);
    },
    handleDragStart(e, id) {
      this.modelId = id;
      this.isshow = false;
      if (this.modelId == 1) {
        this.radioDragType = false;
      } else if (this.modelId == 2) {
        this.mutiradioDragType = false;
      } else if (this.modelId == 3) {
        this.checkboxDragType = false;
      } else {
        this.orderDragType = false;
      }
    },
    handleDrag(e) {},
    handleDragEnd(e) {
      if (this.modelId == 1) {
        this.radioDragType = true;
      } else if (this.modelId == 2) {
        this.mutiradioDragType = true;
      } else if (this.modelId == 3) {
        this.checkboxDragType = true;
      } else {
        this.orderDragType = true;
      }

      if (
        e.screenX >= this.$refs.pdfCon.offsetLeft &&
        e.screenX <=
          this.$refs.pdfCon.offsetLeft + this.$refs.pdfCon.offsetWidth &&
        e.screenY >= this.$refs.pdfCon.offsetTop &&
        e.screenY <=
          this.$refs.pdfCon.offsetTop + this.$refs.pdfCon.offsetHeight
      ) {
        this.addModelNum++;
        let str = "";
        let inputValue = [];
        if (this.modelId == 1) {
          inputValue.push({ value: "" }, { value: "" }, { value: "" });
        } else if (this.modelId == 2) {
          inputValue.push({ value: "" }, { value: "" }, { value: "" });
        } else {
          inputValue.push({ value: "" });
        }
        this.modelList.push({
          modelType: this.modelId,
          subject: "",
          option: inputValue,
        });
        this.$refs.pdfCon.scrollTop = 100000;
      }
    },
    showDialog() {
      this.dialogVisible = true;
    },
    clearItem() {
      this.showItem = false;
    },
    setTenantId(){ // 得到当前租户 id
      this.tenantId = this.$store.getters.getUser.data.id
      console.log("租户id" + this.tenantId)
    },

  },
  beforeMount() {
    this.setTenantId()
  },
};
</script>

<style scoped>
.page {
  width: 100%;
  height: 110vh;
  position: relative;
  background: #ffffff;
}
.pdfModelBox {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
}
.tools_contents .toolbars {
  background: #f7f7f7;
  overflow: auto;
  zoom: 1;
  padding-right: 5px;
  margin: center;
}
.toolbars ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  margin-left: 5px;
}
.toolbars ul li {
  float: left;
  padding: 0px;
  display: inline;
  *width: 30px;
  /* border: 1px solid #cc3333; */
}

.buttonbox {
  float: right;
  padding: 5px;
  margin-right: 50% auto;
  display: inline;
  *wide: 50px;
  align-items: center;
  padding-top: 10px;
}
.pdfCon {
  width: 70%;
  height: 80%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);
  margin: 2% auto;
  overflow: auto;
  overflow-x: hidden;
  background: #f5f5f5;
  padding-bottom: 40px;
}
.toolbox {
  position: fixed; /*固定作用*/
  _position: absolute; /* 把导航栏位置定义为绝对位置 关键*/
  _top: expression(
    documentElement.scrollTop + "px"
  ); /* 把导航栏位置放在浏览器垂直滚动条的顶端 关键 */
  width: 100%;
  z-index: 9999; /* 让导航栏浮在网页的高层位置，遇到flash和图片时候也能始终保持最外层 */
  background: #f7f7f7;
}
.tooltext {
  width: 300px;
}
.tooltext {
  height: 20px;
  background: #f1f2f4;
  font-size: 12px;
  font-family: "新宋体";
  color: #707781;
  line-height: 20px;
  text-align: center;
  padding: 3px 0px;
  border-top: 1px dashed #c7c7c7;
  width: 100%;
}
.card-header {
  display: inline;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.box-card1 {
  max-width: 100px;
}
.box-card2 {
  width: 100%;
}
.label {
  max-width: 80px;
  max-height: 30px;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.choice {
  display: flex;
}

.el-card__header {
  align-items: center;
}
</style>

